<template>
    <div class="menu-list">
        <div class="search-con">
            <a-button type="primary">
                <template #icon>
                    <PlusCircleOutlined />
                </template>
                添加菜单
            </a-button>
        </div>
        <a-table bordered :data-source="dataSource" :columns="columns" rowKey="id">
            <template #bodyCell="{column, record}">
                <template v-if="column.dataIndex === 'action' && record.pId === '0'">
                    <a-button>添加子菜单</a-button>
                </template>
            </template>
        </a-table>
        <dialog-edit-menu></dialog-edit-menu>
    </div>
</template>

<script lang="ts" setup>
interface IMenuItem {
  id: string,
  pId: string,
  icon: string,
  title: string,
  path: string,
  sort: number,
  children?: IMenuItem[]
}
import { PlusCircleOutlined } from '@ant-design/icons-vue'
import DialogEditMenu from './components/DialogEditMenu.vue'
import { ref } from 'vue';
const columns = [
    {
        title: "ID",
        dataIndex: "id",
        width: 220
    },
    {
        title: "菜单名称",
        dataIndex: "title",
        width: 250
    },
    {
        title: "菜单图标",
        dataIndex: "icon",
        width: 250
    },
    {
        title: "跳转路径",
        dataIndex: "path",
        width: 300
    },
    {
        title: "操作",
        dataIndex: "action",
    },
]

const dataSource = ref<IMenuItem[]>([
      {
        id: "1",
        pId: "0",
        icon: "HomeOutlined",
        title: "首页",
        path: "/home",
        sort: 1,
      },
      {
        id: "2",
        pId: "0",
        icon: "TeamOutlined",
        title: "用户与权限",
        sort: 2,
        path: "",
        children: [
          {
            id: "2-1",
            pId: "2",
            icon: "",
            title: "用户管理",
            sort: 1,
            path: "/management/user",
          },
          {
            id: "2-2",
            icon: "",
            pId: "2",
            sort: 2,
            title: "角色管理",
            path: "/management/role",
          },
          {
            id: "1-2",
            icon: "",
            pId: "2",
            sort: 3,
            title: "权限管理",
            path: "/management/power",
          },
        ],
      },
      {
        id: "3",
        pId: "0",
        icon: "SettingOutlined",
        title: "系统设置",
        sort: 3,
        path: "",
        children: [
          {
            id: "3-1",
            pId: "3",
            icon: "",
            title: "菜单管理",
            sort: 1,
            path: "/system/menu",
          },
        ],
      },
])
</script>

<style lang="scss">
.menu-list {
    padding: 20px;
    .search-con {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 20px;
    }
}
</style>